<template>
	<view>
		<view class="head">
			<view class="headleft">
				<text class="iconfont icon-gengduo" @click="dhlist"></text>
			</view>
			<view class="headcenter">
				<view class="text-ellipsis">
					{{ tatle }}
				</view>
			</view>
			<view class="headright" @click="newtext">
				<text class="iconfont icon-xinzengduihua" style="font-size: 20px;"></text>
			</view>
		</view>

		<view class="body">
			<view class="bodyone" v-if="ifnull">	
				<image :src="bossurl" mode="aspectFit"
					style="width: 50px;height: 50px; margin-left:40vw ;margin-right: 40vw;margin-bottom: 10px;"></image>
				<view class="" style="width: 100vw; text-align: center; margin-bottom: 5px;">
					<text style=" font-size: 16px; font-weight: bold;">Hello! 我 是 你 的 私 人 面 试 官</text>
				</view>
				<view class="" style="width: 100vw; text-align: center;">
					<text style=" font-size: 14px;">有什么工作面试需求尽情跟我沟通把~</text>
				</view>
			</view>
			<view class="all">
	

			<view class="bodytwo" v-if="ifnull==false">  
				<scroll-view scroll-y class="gd" :style="{height: scrollHeight + 'vh'}" :scroll-into-view="scrollToId">
					
					<view style="height: 7px;">

					</view>
					<view class="" v-for="(item,index) in datalist" :key="index">
						<view class="dh">
							<view>
								<image :src="bossurl" style="width: 40px;height: 40px;margin-left: 7px;"
									mode="aspectFit" v-if="!item.power"></image>
							</view>
							
							<view class="load" v-if="item.text ===''  ">
								<!-- From Uiverse.io by Nawsome -->
								<div class="blobs" style="width: 160px;height: 50px;">
									<div class="blob-center"></div>
									<div class="blob"></div>
									<div class="blob"></div>
									<div class="blob"></div>
									<div class="blob"></div>
									<div class="blob"></div>
									<div class="blob"></div>
								</div>
								<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
									<defs>
										<filter id="goo">
											<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur">
											</feGaussianBlur>
											<feColorMatrix in="blur" mode="matrix"
												values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo">
											</feColorMatrix>
											<feBlend in="SourceGraphic" in2="goo"></feBlend>
										</filter>
									</defs>
								</svg>
													
							</view>
							
							<view class="bossdhk" style="" v-if=" item.text != ''   && !item.power">
								<text user-select="true"  style="word-wrap: break-word; word-break: break-all;">
									{{item.text}}
								</text>
							</view>
							<view class="userdhk" style="" v-if="ifload==false &&item.power">
								<view class="userdhktext">
									<text  user-select="true" style="word-wrap: break-word; word-break: break-all;text-align: left;">
										{{item.text}}
									</text>
								</view>
								
							</view>
							<view class="">
								
							</view>
						</view>
					</view>
					<view id="gddb"></view>
				</scroll-view>
			</view>
		</view>
		<view class="wjclass" style="" v-if="dhdata.dhimg !=='' ">
			<view class="xz" >
				<text style="width: 58vw;">{{imagename}}</text>
				
			</view>
			<text @click="gbimg" class="iconfont icon-close" style="font-size: 3vw;margin-left: 2vw;"></text>
		</view>
		<view class="buttom">
			<view class="inputtext">
				<u-input
				  v-model="textvalue"
				  placeholder="开始跟我聊天吧"
				  border="surround"
				  shape="circle"
				   @confirm="confirm"
				  @change="textchang"
				>
				  <!-- 自定义后缀图标（可点击） -->
				  <template #suffix>
					  <view class="" style="display: flex;">
					  	<u-icon
					  	    :name="iconfj" 
					  	    @click="fjconfirm" 
					  	    color="#909399"
					  	  />
						  <view class="" style="margin-right: 2vw;">
						  	
						  </view>
						  
					  	<u-icon v-if="!icontrue || !dhend"
					  	  :name="iconinput" 
					  	  style="font-size: 40px;"
					  	  
					  	  color="#909399"
					  	/>
						<u-icon v-if="icontrue && dhend"
						  :name="iconinputtrue" 
						  style="font-size: 40px;"
						  @click="confirm" 
						  color="#909399"
						/>
					  </view>
					  
				  </template>
				</u-input>
			</view>
			<view class="">
				
			</view>
			
			<view class="fjclass" v-if="fjsc" style="display: flex;">
				<!-- 附件 -->
				<view class="updataimg" style="" @click="updataimg()">
					<text class="iconfont icon-paizhao" style="font-size: 50px;"></text>
				</view>
					
			</view>
	</view>
</view>	
	<view class="">
		<u-popup :show="show" mode="left"  @close="close" @open="open">
		        <view>
					<view class="lstatle" >
						
						<text>历史记录</text>
					</view>
					<view class="endlist" v-if="!edif">
						</view>
		           <view class="lstextlist" v-if="edif" @click="lsjlclick">
					   
		           	<view class="btls" style="">
		           		<text>{{endtatle}}</text>
		           	</view>
					
					<view class="" style="width: 96%; margin-left: 2%; margin-right: 2%; height: 1px; background-color: #c2c2c2; margin-top: 1vh;margin-bottom: 1vh;">
						
					</view>
					
					<view class="btls" >
						<text>{{enddatalist[1].text}}</text>
					</view>
					
		           </view>
		        </view>
			</u-popup>
	</view>
	</view>
</template>

<script>
import { methods } from 'uview-ui/libs/mixin/mixin';
import {requestTask,requestTaskIMG,requestTaskIMGint} from '../../../api/AIapi/AIapi'
import {uploadImage} from '../../../api/AIapi/AIapi'
	export default {
		data() {
			return {
				imagename:"",
				icontrue:false,
				 show: false,
				fullAnswer:'',
				dhdata:{inputs:{},dhimg:"",query:"",response_mode:"streaming",conversation_id:"",user:"abc-123"},
			scrollToId: '',
				scrollHeight:87,
				fjsc:false,			//附件的上传组件
				iconfj:this.$baseURL+"/profile/upload/2025/05/10/fujian_20250508123140A090_20250510150736A058.png",
				iconinput:this.$baseURL+"/profile/upload/2025/05/10/huishangchuan_20250508123441A092_20250510150742A059.png",
				iconinputtrue:this.$baseURL+"/profile/upload/2025/05/10/fasong_20250508123153A091_20250510150731A057.png",
				textvalue:'',
				bossurl:this.$baseURL+"/profile/upload/2025/05/10/boss_20250507161350A061_20250510145949A011.png",
				tatle: "新对话",
				iftatle:false,
				ifnull: true,		//是否有对话信息true是没有
				ifload: false,		//ai是否已经回答问题
				datalist:[],
				edif:false,
				endtatle:"",
				enddatalist:[],
				dhtext:"",
				hdindex:0,
				dhend:true

			}
			
		},
		methods:{
			textclick(){
				
			},
			lsjlclick(){
				this.show=false
				this.edif=false
				this.endtatle=""
				this.datalist=this.enddatalist
				this.enddatalist=[]
				this.icontrue=false
				this.ifnull=false
				if(this.fjsc){
					this.fjsc=false
					if(this.fjsc){
						this.scrollHeight-=15
					}else{
						this.scrollHeight+=15
					}
				}
				
				this.scrollToId = 'gddb';
				    // 重置 scrollToId，以便下次点击仍能触发滚动
				    setTimeout(() => {
				      this.scrollToId = '';
				    }, 100);
				if(!this.iftatle){
					this.tatle=this.textvalue
					this.iftatle=true
				}
			},
			gbimg(){
				this.dhdata.dhimg=""
			},
			updataimg(){
				uni.chooseImage({
				    count: 1, // 最多选一张
				    sizeType: ['original', 'compressed'],
				    sourceType: ['album', 'camera'], // 相册或拍照
				    success :(res)=> {
				      const tempFilePath = res.tempFilePaths[0] // 取第一张图路径
				
				      // 调用封装好的上传接口
				      uploadImage({
				        file: tempFilePath,
				        user: 'abc-123' // 根据你的业务传入用户标识
				      })
				        .then(result => {
				          console.log('✅ 上传成功：', result)
				          uni.showToast({ title: '上传成功', icon: 'success' })
							this.dhdata.dhimg=result.id
							this.imagename=result.name
				          // 示例：可以更新 data 中的图片列表实现回显
				          // this.fileList = [{ url: result.data.url }]
				        })
				        .catch(error => {
				          console.error('❌ 上传失败：', error)
				          uni.showToast({ title: '上传失败', icon: 'none' })
				        })
				    },
				    fail() {
				      uni.showToast({ title: '取消选择', icon: 'none' })
				    }
				  })
			},
			beforeUpload(index,list){
				console.log(index)
				console.log(list)
			},
			newtext(){
				if(this.ifnull){
					uni.showToast({ title: '已经是新对话', icon: 'none' })
				}else{
					this.endtatle=this.tatle
					this.enddatalist=this.datalist
					this.datalist=[]
					this.edif=true
					this.icontrue=true
					this.ifnull=true
					this.tatle="新对话"
					this.icontrue=false
				}
				
			},
			dhlist(){
				
				this.show = true
			},
			open() {
			        // console.log('open');
			      },
			      close() {
			        this.show = false
			        // console.log('close');
			      },
			textchang(e){
				
				if (e === "") {
					
				    this.icontrue=false
				  } else {
					  
					 this.icontrue=true 
				    
				  }
			},
			fjconfirm(){
				console.log("附件")
				// 附件的
				this.fjsc=!this.fjsc
				if(this.fjsc){
					this.scrollHeight-=15
				}else{
					this.scrollHeight+=15
				}
				this.scrollToId = 'gddb';
				    // 重置 scrollToId，以便下次点击仍能触发滚动
				    setTimeout(() => {
				      this.scrollToId = '';
				    }, 100);
			},
			confirm(){
				if(this.dhend){			//当前对话是否回答完毕
				this.dhend=false
					if (this.textvalue != "") {
						console.log("有内容输出")
						console.log(this.textvalue)
						 this.icontrue=false
					    this.ifnull=false
						if(this.fjsc){
							this.fjsc=false
							if(this.fjsc){
								this.scrollHeight-=15
							}else{
								this.scrollHeight+=15
							}
						}
						
						this.scrollToId = 'gddb';
						    // 重置 scrollToId，以便下次点击仍能触发滚动
						    setTimeout(() => {
						      this.scrollToId = '';
						    }, 100);
						if(!this.iftatle){
							this.tatle=this.textvalue
							this.iftatle=true
						}
						
						this.datalist.push({power:1,text:this.textvalue})
						this.datalist.push({power:0,text:""})
						
						this.dhdata.query=this.textvalue
						console.log(this.dhdata)
						
						  if(this.dhdata.dhimg!==""){
							  
							  console.log("有图片调用")
							  console.log(this.dhdata)
							  requestTaskIMG(this.dhdata, (res) => {
								  console.log(res)
							  		if(res!=="streamingEND"){
										
							  		  this.dhtext+=res
							  		}else{this.dhend=true}
							  							  
							  		if(!this.hdindex){
							  		  this.datalist.pop()
							  		  this.datalist.push({power:0,text:this.dhtext})				  
							  		 }else {
							  		  const lastIndex = this.datalist.length - 1;
							  		   this.datalist[lastIndex].text=this.dhtext
							  		   this.scrollToId = 'gddb';
							  								       // 重置 scrollToId，以便下次点击仍能触发滚动
							  			    setTimeout(() => {
							  			       this.scrollToId = '';
							  			     }, 100);
							  		 }
							  
							  			  if(res==="streamingEND"){	//流式回答结束
							  									   this.dhtext=""
							  		   }
							        });
							 
							 
						  }else{
							  
							  requestTask(this.dhdata, (res) => {
								  if(res!=="streamingEND"){
									 
									  this.dhtext+=res
								  }else{this.dhend=true}
								  
								  if(!this.hdindex){
									  this.datalist.pop()
									  this.datalist.push({power:0,text:this.dhtext})
									  
									  
								  }else {
									  const lastIndex = this.datalist.length - 1;
									   this.datalist[lastIndex].text=this.dhtext
									   this.scrollToId = 'gddb';
									       // 重置 scrollToId，以便下次点击仍能触发滚动
									       setTimeout(() => {
									         this.scrollToId = '';
									       }, 100);
								  }
					
									   if(res==="streamingEND"){	//流式回答结束
										   this.dhtext=""
									   }
							        });
									
							  
						  }
					
						this.textvalue=""
						this.dhdata.dhimg=""
						
					  this.scrollToId = 'gddb';
					// 重置 scrollToId，以便下次点击仍能触发滚动
					      setTimeout(() => {
					        this.scrollToId = '';
					      }, 100);
					  } 
				}
				
			}
			
		}
		
	}
</script>

<style scoped>
	.xz{
		
		width: 58vw;
		/* 或根据需要设定宽度 */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		
	}
	.wjclass{
		display: flex;
		margin-top: 1vh;
		margin-left: 4vw;
		width: 65vw;
		height: 3vh;
		/* background-color: aqua; */
	}
	.updataimg{
		display: flex;
		  justify-content: center; /* 水平居中 */
		  align-items: center;     /* 垂直居中 */
		width: 100px;
		height: 100px;
		background-color: #f4f4f4;
		margin-top: 1vh;
		margin-bottom: 1vh;
		margin-left: 4vw;
		border-radius: 10px;
	}
	.endlist{
		width: 66vw;
		height: 16vh;
		
		
		margin-left: 2vw;
		margin-right: 2vw;
		
	}
	.btls{
		width: 58vw;
		/* 或根据需要设定宽度 */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-top: 8px;
		padding-left: 15px;
	}
	.lstatle{
		margin-top: 1vh;
		
		text-align: center;
	}
	.lstextlist{
		width: 66vw;
		height: 16vh;
		border-radius: 20px;
		margin-top: 2vh;
		margin-left: 2vw;
		margin-right: 2vw;
		background-color: #e2e2e2;
	}
	.gd{
		
	}
	.fjclass{
		width: 100vw;
		height: 13vh;
	}
	.inputtext{
		border-radius: 50px;
		width: 96vw;
		margin-left: 2vw;
		margin-right: 2vw;
		/* margin-bottom: 2vh; */
		background-color: #f7f7f7;
	}
	.buttom {
		
		width: 100vw;
		margin-top: 0.5vh;
		margin-bottom: 3vh;
		/* height: 15vh; */
		/* background-color: #8e8aff; */
		
		   
	}
	.userdhk{
		display: flex;
		    justify-content: flex-end;
		    width: 78vw;
			margin-right: 3vw;
		    margin-left: 15vw;
			
	}
	.userdhktext{
		
		padding-left: 2vw;
		padding-right: 2vw;
		padding-top: 1vh;
		padding-bottom: 1vh;
		border-radius: 16px;
		background-color: #e4ebff;
	}
	.bossdhk{
		margin-left: 10px;
		/* background-color: aquamarine; */
		width:80vw;
		
		/* height: 100px; */
	}
	.head {
		display: flex;
		width: 100vw;
		justify-content: space-between;
		flex-wrap: nowrap;
		padding-top: 1vh;
		padding-bottom: 1vh;
	}

	.dh {
		width: 100vw;
		display: flex;
		margin-bottom: 2vh;
	}

	.bodytwo {
		width: 100vw;
		
	}

	/* .body{
		width: 100vw;
		height: 54vh;
		margin-bottom: 0.3vh;
	} */

	.bodyone {
		width: 100vw;
		height: 29vh;
		margin-top: 28vh;
		margin-bottom: 29vh;
		/* background-color: #535bff; */
	}

	.head {
		display: flex;
		width: 94vw;
		justify-content: space-between;
		flex-wrap: nowrap;
		margin-left: 3vw;
		margin-right: 3vw;
	}

	.text-ellipsis {
		width: 400rpx;
		/* 或根据需要设定宽度 */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
	}

	.icon {
		width: 1em;
		height: 1em;
		vertical-align: -0.15em;
		fill: currentColor;
		overflow: hidden;
	}

	/* From Uiverse.io by Nawsome */
	.blobs {
		width: 300px;
		height: 300px;
		position: absolute;
		overflow: hidden;
		border-radius: 70px;
		transform-style: preserve-3d;
	}

	.blobs .blob-center {
		transform-style: preserve-3d;
		position: absolute;
		background: #1d1d1d;
		top: 50%;
		left: 50%;
		width: 10px;
		height: 10px;
		transform-origin: left top;
		transform: scale(0.9) translate(-50%, -50%);
		animation: blob-grow_2 linear 3.4s infinite;
		border-radius: 50%;
		box-shadow: 0 -10px 40px -5px #1d1d1d;
	}

	.blob {
		position: absolute;
		background: #1d1d1d;
		top: 50%;
		left: 50%;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		animation: blobs_2 ease-out 3.4s infinite;
		transform: scale(0.9) translate(-50%, -50%);
		transform-origin: center top;
		opacity: 0;
	}

	.blob:nth-child(1) {
		-webkit-animation-delay: 0.2s;
		animation-delay: 0.2s;
	}

	.blob:nth-child(2) {
		-webkit-animation-delay: 0.4s;
		animation-delay: 0.4s;
	}

	.blob:nth-child(3) {
		-webkit-animation-delay: 0.6s;
		animation-delay: 0.6s;
	}

	.blob:nth-child(4) {
		-webkit-animation-delay: 0.8s;
		animation-delay: 0.8s;
	}

	.blob:nth-child(5) {
		-webkit-animation-delay: 1s;
		animation-delay: 1s;
	}

	@keyframes blobs_2 {
		0% {
			opacity: 0;
			transform: scale(0) translate(calc(-330px - 50%), -50%);
		}

		1% {
			opacity: 1;
		}

		35%,
		65% {
			opacity: 1;
			transform: scale(0.9) translate(-50%, -50%);
		}

		99% {
			opacity: 1;
		}

		100% {
			opacity: 0;
			transform: scale(0) translate(calc(330px - 50%), -50%);
		}
	}

	@keyframes blob-grow_2 {

		0%,
		39% {
			transform: scale(0) translate(-50%, -50%);
		}

		40%,
		42% {
			transform: scale(1, 0.9) translate(-50%, -50%);
		}

		43%,
		44% {
			transform: scale(1.2, 1.1) translate(-50%, -50%);
		}

		45%,
		46% {
			transform: scale(1.3, 1.2) translate(-50%, -50%);
		}

		47%,
		48% {
			transform: scale(1.4, 1.3) translate(-50%, -50%);
		}

		52% {
			transform: scale(1.5, 1.4) translate(-50%, -50%);
		}

		54% {
			transform: scale(1.7, 1.6) translate(-50%, -50%);
		}

		58% {
			transform: scale(1.8, 1.7) translate(-50%, -50%);
		}

		68%,
		70% {
			transform: scale(1.7, 1.5) translate(-50%, -50%);
		}

		78% {
			transform: scale(1.6, 1.4) translate(-50%, -50%);
		}

		80%,
		81% {
			transform: scale(1.5, 1.4) translate(-50%, -50%);
		}

		82%,
		83% {
			transform: scale(1.4, 1.3) translate(-50%, -50%);
		}

		84%,
		85% {
			transform: scale(1.3, 1.2) translate(-50%, -50%);
		}

		86%,
		87% {
			transform: scale(1.2, 1.1) translate(-50%, -50%);
		}

		90%,
		91% {
			transform: scale(1, 0.9) translate(-50%, -50%);
		}

		92%,
		100% {
			transform: scale(0) translate(-50%, -50%);
		}

	}
</style>